<template>
  <div class="content">
    <div id="top" class="title">
      <p>{{ $t(guideData.title) }}</p>
    </div>
    <div class="guidelist">
      <div v-for="item in guideData.helpDetailData" :key="item.id">
        <p class="guidetitle">{{ $t(item.title) }}</p>
        <ul>
          <li
            class="guideitem"
            v-for="operation in item.operationGuideList"
            :key="operation.id"
          >
            <a :href="'#' + operation.id">{{ $t(operation.title) }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div
      class="contentlist"
      v-for="item in guideData.helpDetailData"
      :key="item.id"
    >
      <p class="helptit">{{ $t(item.title) }}</p>
      <div v-for="operation in item.operationGuideList" :key="operation.id">
        <p style="display: inline-block" class="helptxt">
          {{ $t(operation.title) }}
        </p>
        <a href="#top" class="back">{{ $t('返回') }}</a>
        <div style="white-space: pre-line" :id="operation.id" class="text">
          {{ $t(operation.detail) }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      guideData: '',
      activeNames: 1,
      helpIndex: 0,
      helpList: [
        {
          title: '终端管理',
          helpDetailData: [
            {
              title: '终端分组操作',
              id: 1,
              operationGuideList: [
                {
                  title: '如何添加终端分组？',
                  detail: '如何添加终端分组操作',
                  id: 11,
                },
                {
                  title: '如何删除终端分组？',
                  detail: '如何删除终端分组操作',
                  id: 12,
                },
                {
                  title: '如何给终端分组改名？',
                  detail: '如何给终端分组改名操作',
                  id: 13,
                },
                {
                  title: '如何刷新终端分组树？',
                  detail: '如何终端分组刷新操作',
                  id: 15,
                },
                {
                  title: '如何显示终端分组下的终端？',
                  detail: '如何显示终端分组下的终端操作',
                  id: 16,
                },
                {
                  title: '如何按分组批量设置终端？',
                  detail: '如何按分组批量设置终端操作',
                  id: 17,
                },
              ],
            },
            {
              title: '终端标签操作',
              id: 2,
              operationGuideList: [
                {
                  title: '如何显示包含某一标签的所有终端？',
                  detail: '如何显示包含某一标签的所有终端操作',
                  id: 21,
                },
                {
                  title: '如何按标签设置终端？',
                  detail: '如何按标签设置终端操作',
                  id: 22,
                },
              ],
            },
            {
              title: '终端操作',
              id: 3,
              operationGuideList: [
                {
                  title: '如何添加终端？',
                  detail: '如何添加终端操作',
                  id: 31,
                },
                {
                  title: '如何修改终端设置？',
                  detail: '如何修改终端设置操作',
                  id: 32,
                },
                {
                  title: '如何刷新终端列表？',
                  detail: '如何刷新终端列表操作',
                  id: 33,
                },
                {
                  title: '如何审核终端',
                  detail: '如何审核终端操作',
                  id: 34,
                },
                {
                  title: '如何给终端排序？',
                  detail: '如何给终端排序操作',
                  id: 35,
                },
                {
                  title: '如何搜索终端？',
                  detail: '如何搜索终端操作',
                  id: 36,
                },
                {
                  title: '如何改变终端所属分组？',
                  detail: '如何改变终端所属分组操作',
                  id: 37,
                },
                {
                  title: '如何给终端添加标签？',
                  detail: '如何给终端添加标签操作',
                  id: 38,
                },
              ],
            },
          ],
        },
        {
          title: '终端监控',
          helpDetailData: [
            {
              title: '终端监控操作',
              id: 4,
              operationGuideList: [
                {
                  title: '如何显示终端分组下的终端？',
                  detail: '终端监控如何显示终端分组下的终端操作',
                  id: 41,
                },
                {
                  title: '如何显示包含某一标签的所有终端？',
                  detail: '如何显示包含某一标签的所有终端操作',
                  id: 42,
                },
                {
                  title: '如何给终端排序？',
                  detail: '如何给终端排序操作',
                  id: 43,
                },
                {
                  title: '如何搜索终端？',
                  detail: '终端监控如何搜索终端操作',
                  id: 44,
                },
                {
                  title: '如何刷新终端状态？',
                  detail: '如何刷新终端状态操作',
                  id: 45,
                },
                {
                  title: '如何向终端下发命令？',
                  detail: '如何向终端下发命令操作',
                  id: 46,
                },
                {
                  title: '如何显示终端的详细监控信息？',
                  detail: '如何显示终端的详细监控信息操作',
                  id: 47,
                },
              ],
            },
          ],
        },
        {
          title: '终端日志',
          helpDetailData: [
            {
              title: '终端日志操作',
              id: 5,
              operationGuideList: [
                {
                  title: '如何显示终端分组下的终端日志？',
                  detail: '如何显示终端分组下的终端日志操作',
                  id: 51,
                },
                {
                  title: '如何查询某一时间段的终端日志？',
                  detail: '如何查询某一时间段的终端日志操作',
                  id: 52,
                },
                {
                  title: '如何对终端日志按时间排序？',
                  detail: '如何对终端日志按时间排序操作',
                  id: 53,
                },
              ],
            },
          ],
        },
        {
          title: '媒体资源管理',
          helpDetailData: [
            {
              title: '媒体资源目录操作',
              id: 5,
              operationGuideList: [
                {
                  title: '如何添加媒体资源目录？',
                  detail: '如何添加媒体资源目录操作',
                  id: 51,
                },
                {
                  title: '如何删除媒体资源目录？',
                  detail: '如何删除媒体资源目录操作',
                  id: 52,
                },
                {
                  title: '如何给媒体资源目录改名？',
                  detail: '如何给媒体资源目录改名操作',
                  id: 53,
                },
                {
                  title: '如何刷新媒体资源目录树？',
                  detail: '如何刷新媒体资源目录树操作',
                  id: 54,
                },
                {
                  title: '如何显示媒体资源目录下的媒体资源？',
                  detail: '如何显示媒体资源目录下的媒体资源操作',
                  id: 55,
                },
              ],
            },
            {
              title: '媒体资源操作',
              id: 6,
              operationGuideList: [
                {
                  title: '如何添加媒体资源？',
                  detail: '如何添加媒体资源操作',
                  id: 61,
                },
                {
                  title: '如何下载媒体资源？',
                  detail: '如何下载媒体资源操作',
                  id: 62,
                },
                {
                  title: '如何删除媒体资源？',
                  detail: '如何删除媒体资源操作',
                  id: 63,
                },
                {
                  title: '如何修改媒体资源的有效期等属性？',
                  detail: '如何修改媒体资源的有效期等属性操作',
                  id: 64,
                },
                {
                  title: '如何刷新媒体资源列表？',
                  detail: '如何刷新媒体资源列表操作',
                  id: 65,
                },
                {
                  title: '如何给媒体资源排序？',
                  detail: '如何给媒体资源排序操作',
                  id: 66,
                },
                {
                  title: '如何搜索媒体资源？',
                  detail: '如何搜索媒体资源操作',
                  id: 67,
                },
                {
                  title: '如何改变媒体资源所属目录？',
                  detail: '如何改变媒体资源所属目录操作',
                  id: 68,
                },
              ],
            },
          ],
        },
        {
          title: '节目操作',
          helpDetailData: [
            {
              title: '节目制作',
              id: 7,
              operationGuideList: [
                {
                  title: '如何新建节目？',
                  detail: '如何新建节目操作',
                  id: 71,
                },
                {
                  title: '如何删除节目？',
                  detail: '如何删除节目操作',
                  id: 72,
                },
                {
                  title: '如何筛选节目？',
                  detail: '如何筛选节目操作',
                  id: 73,
                },
                {
                  title: '如何编辑节目？',
                  detail: '如何编辑节目操作',
                  id: 74,
                },
                {
                  title: '如何刷新节目列表？',
                  detail: '如何刷新节目列表操作',
                  id: 75,
                },
                {
                  title: '如何另存节目？',
                  detail: '如何另存节目操作',
                  id: 76,
                },
                {
                  title: '如何通过对节目的审核？',
                  detail: '如何通过对节目的审核操作',
                  id: 77,
                },
              ],
            },
          ],
        },
        {
          title: '节目发布',
          helpDetailData: [
            {
              title: '节目发布',
              id: 8,
              operationGuideList: [
                {
                  title: '如何新建节目发布？',
                  detail: '如何新建节目发布操作',
                  id: 81,
                },
                {
                  title: '如何删除节目发布？',
                  detail: '如何删除节目发布操作',
                  id: 82,
                },
                {
                  title: '如何编辑节目发布？',
                  detail: '如何编辑节目发布操作',
                  id: 83,
                },
                {
                  title: '如何刷新节目发布列表？',
                  detail: '如何刷新节目发布列表操作',
                  id: 84,
                },
                {
                  title: '如何通过对节目发布的审核？',
                  detail: '如何通过对节目发布的审核操作',
                  id: 85,
                },
              ],
            },
          ],
        },
        {
          title: '用户管理',
          helpDetailData: [
            {
              title: '用户分组操作',
              id: 9,
              operationGuideList: [
                {
                  title: '如何添加用户分组？',
                  detail: '如何添加用户分组操作',
                  id: 91,
                },
                {
                  title: '如何删除用户分组？',
                  detail: '如何删除用户分组操作',
                  id: 92,
                },
                {
                  title: '如何给用户分组改名？',
                  detail: '如何给用户分组改名操作',
                  id: 93,
                },
                {
                  title: '如何刷新用户分组树？',
                  detail: '如何刷新用户分组树操作',
                  id: 94,
                },
                {
                  title: '如何显示用户分组下的终端？',
                  detail: '如何显示用户分组下的终端操作',
                  id: 95,
                },
              ],
            },
            {
              title: '组织结构操作',
              id: 10,
              operationGuideList: [
                {
                  title: '如何调整组织结构？',
                  detail: '如何调整组织结构操作',
                  id: 101,
                },
                {
                  title: '如何显示某用户的直系下属？',
                  detail: '如何调整组织结构操作',
                  id: 102,
                },
              ],
            },
            {
              title: '用户操作',
              id: 11,
              operationGuideList: [
                {
                  title: '如何添加用户？',
                  detail: '如何添加用户操作',
                  id: 111,
                },
                {
                  title: '如何修改用户配置？',
                  detail: '如何修改用户配置操作',
                  id: 112,
                },
                {
                  title: '如何删除用户？',
                  detail: '如何删除用户操作',
                  id: 113,
                },
                {
                  title: '如何刷新用户列表？',
                  detail: '如何刷新用户列表操作',
                  id: 114,
                },
                {
                  title: '如何给用户排序？',
                  detail: '如何给用户排序操作',
                  id: 115,
                },
                {
                  title: '如何搜索用户？',
                  detail: '如何搜索用户操作',
                  id: 116,
                },
              ],
            },
          ],
        },
        {
          title: '角色管理',
          helpDetailData: [
            {
              title: '用户角色操作',
              id: 12,
              operationGuideList: [
                {
                  title: '如何添加用户角色？',
                  detail: '如何添加用户角色操作',
                  id: 121,
                },
                {
                  title: '如何编辑用户角色？',
                  detail: '如何编辑用户角色操作',
                  id: 122,
                },
                {
                  title: '如何删除用户角色？',
                  detail: '如何删除用户角色操作',
                  id: 123,
                },
                {
                  title: '如何刷新用户角色？',
                  detail: '如何刷新用户角色操作',
                  id: 124,
                },
              ],
            },
          ],
        },
        {
          title: '操作日志管理',
          helpDetailData: [
            {
              title: '操作日志操作',
              id: 13,
              operationGuideList: [
                {
                  title: '如何显示用户分组下的操作日志？',
                  detail: '如何显示用户分组下的操作日志操作',
                  id: 131,
                },
                {
                  title: '如何查询某一时间段的操作日志？',
                  detail: '如何查询某一时间段的操作日志操作',
                  id: 132,
                },
                {
                  title: '如何对操作日志按时间排序？',
                  detail: '如何对操作日志按时间排序操作',
                  id: 133,
                },
              ],
            },
          ],
        },
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initData()
    })
  },
  methods: {
    initData() {
      this.guideData = this.helpList[this.helpIndex]
    },
    updateData(index) {
      this.guideData = this.helpList[index]
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  padding: 0;
}
.title {
  font-size: 16px;
  font-weight: bold;
  padding-left: 20px;
}
.guidelist {
  border-bottom: 1px solid #e9e9e9;
  .guidetitle {
    font-size: 15px;
    padding: 0 20px;
    border-top: 1px solid #e9e9e9;
    margin: 0;
    padding-top: 20px;
  }
  .guideitem {
    padding-bottom: 12px;
    font-size: 14px;
  }
}
.contentlist {
  margin-top: 30px;
  font-size: 14px;
  color: #666;
  padding-left: 20px;
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 20px;
}
.contentlist:last-child {
  border-bottom: 0;
}
.back {
  color: #999;
  font-size: 13px;
  padding-left: 10px;
}
.helptit {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.helptxt {
  color: #333;
  font-size: 14px;
}
.text {
  font-size: 12px;
  color: #666;
  line-height: 24px;
  padding-left: 30px;
}
</style>